<template>
    <uni-popup ref="popRef" type="bottom" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
        <view class="snowy-shadow snowy-padding">
            <view class="snowy-flex-end">
            	<icon type="clear" :size="20" color="#5677fc" @click="close"></icon>
            </view>
            <uni-forms ref="formRef" :model="searchFormData" label-position="top" labelWidth="auto">
                <uni-forms-item label="设备类型" name="type">
                	<snowy-sel-picker :map="{key: 'value', label: 'text'}" v-model="searchFormData.type" :rangeData="typeOptions" placeholder="请选择设备类型"></snowy-sel-picker>
                </uni-forms-item>
                <uni-forms-item label="设备名称" name="deviceName">
                    <uni-easyinput v-model="searchFormData.deviceName" placeholder="请输入设备名称"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="预约用户名称" name="userName">
                    <uni-easyinput v-model="searchFormData.userName" placeholder="请输入预约用户名称"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="预约日期" name="reservationDate">
                    <uni-datetime-picker v-model="searchFormData.reservationDate" type="datetimerange"/>
                </uni-forms-item>
                <uni-forms-item label="预约时间段" name="timeSlot">
                	<snowy-sel-picker :map="{key: 'value', label: 'text'}" v-model="searchFormData.timeSlot" :rangeData="timeSlotOptions" placeholder="请选择预约时间段"></snowy-sel-picker>
                </uni-forms-item>
            </uni-forms>
            <uni-row :gutter="10">
                <uni-col :span="12">
                    <tui-button height="90rpx" type="gray" @click="reset">重置</tui-button>
            	</uni-col>
            	<uni-col :span="12">
                    <tui-button height="90rpx" type="primary" @click="confirm">确认</tui-button>
            	</uni-col>
            </uni-row>
        </view>
    </uni-popup>
</template>
<script setup name="deviceReservationSearch">
    import { ref } from "vue"
    const emits = defineEmits(['reset', 'confirm'])
    const props = defineProps({
    	searchFormData: {
            type: Object,
            required: true
    	},
    })
    const typeOptions = uni.$snowy.tool.dictList('DEVICE_TYPE')
    const timeSlotOptions = uni.$snowy.tool.dictList('TIME_SLOT')

    // 弹出ref
    const popRef = ref()
    // 打开
    const open = () => {
    	popRef.value.open()
    }
    const reset = () =>{
        // 重置数据
        props.searchFormData.type = ''
        props.searchFormData.deviceName = ''
        props.searchFormData.userName = ''
        props.searchFormData.reservationDate = ''
        props.searchFormData.timeSlot = ''
    	emits('reset', props.searchFormData)
    }
    const confirm = () => {
    	popRef.value.close()
    	emits('confirm', props.searchFormData)
    }
    const close = () => {
    	popRef.value.close()
    }
    defineExpose({
    	open
    })
</script>
<style lang="scss" scoped>
</style>
